<template>
  <div v-loading="loading" element-loading-text="数据加载中，请稍后...">
    <el-breadcrumb separator="/" style="margin-bottom:20px;font-size:14px;">
      <el-breadcrumb-item :to="{ path: '/tahome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>查看季报</el-breadcrumb-item>
      <el-breadcrumb-item>{{currentYear + '年第' + quarter + '季度季报'}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs type="border-card">
      <el-tab-pane :label="currentYear+'年第'+quarter+'季度季报'">
        <div style="margin: 20px 20px;">
          <el-row>
            <el-col :span="8" v-for="(btn,index) in buttonList" :key="index">
              <el-button :plain="btn.active" :type="btn.type" @click="handleButtonClick(index)">{{btn.title}}
              </el-button>
            </el-col>
          </el-row>
        </div>
        <div style="margin:0px 5px;border-bottom: 1px solid #cccccc;"></div>

        <div>
          <keep-alive>
            <component :is="currentView" :date="date"></component>
          </keep-alive>
        </div>
        <div style="text-align: center;padding-top:20px;">
          <el-button plain type="primary" @click="handlePrintReport">
            打印请点击此处
          </el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>
<script>
import { mapGetters, mapActions } from "vuex";
import vPrintWljd from "../../components/PrintWljd.vue";
import vPrintZzcj from "../../components/PrintZzcj.vue";
import vPrintZzjd from "../../components/PrintZzjd.vue";

export default {
  components: {
    vPrintWljd,
    vPrintZzcj,
    vPrintZzjd
  },
  created() {
    // this.$store.dispatch("getReportDetail");
    this.loading = true;
    this.getReportDetail().then(
      res => {
        setTimeout(() => {
          this.loading = false;
        }, 300);
      },
      error => {
        this.$message.error(error.errorMessage);
      }
    );
  },
  data() {
    return {
      loading: false,
      currentView: "vPrintWljd",
      printIndex: 0,
      buttonList: [
        {
          title: "外联接待入境旅游",
          index: "vPrintWljd",
          type: "primary",
          active: false
        },
        {
          title: "组织接待国内旅游",
          index: "vPrintZzjd",
          type: "success",
          active: true
        },
        {
          title: "组织出境旅游",
          index: "vPrintZzcj",
          type: "warning",
          active: true
        }
      ]
    };
  },
  computed: {
    ...mapGetters(["reportDetail", "sysinfo"]),
    quarter() {
      return this.sysinfo.season;
    },
    currentYear() {
      return this.sysinfo.year;
    },
    agencyinfo() {
      return this.reportDetail.agencyInfo ? this.reportDetail.agencyInfo : {};
    },
    date() {
      return this.reportDetail.createdAt
        ? this.reportDetail.createdAt.substring(0, 10)
        : "";
    }
  },
  methods: {
    ...mapActions(["getReportDetail"]),
    handleButtonClick(index) {
      this.printIndex = index;
      if (this.buttonList[index].active) {
        this.buttonList.map(btn => {
          btn.active = true;
        });
        this.buttonList[index].active = false;
        this.currentView = this.buttonList[index].index;
      }
    },
    handlePrintReport() {
      sessionStorage.setItem("printDate", this.date);
      sessionStorage.setItem("printtype", this.printIndex);
      sessionStorage.setItem("reportId", this.reportDetail.id);
      this.$router.push({
        name: "govprint"
      });
    }
  }
};
</script>
<style>

</style>
